<template>
  <div>
    <a-spin :spinning="loading">
      <a-card>
        <a-tabs @change="tabChange">
          <a-tab-pane
            :key="item.weid"
            :tab="item.name"
            v-for="item in brands"
          ></a-tab-pane>
        </a-tabs>
        <a-form
          :form="form"
          :label-col="{ span: 3 }"
          :wrapper-col="{ span: 14 }"
          @submit="handleSubmit"
        >
          <a-form-item label="陪逛功能" :required="true">
            <a-radio-group
              button-style="solid"
              @change="radioChange"
              v-decorator="[
                'status',
                {
                  initialValue: 0,
                  rules: [{ required: true, message: '请选择陪逛功能' }],
                },
              ]"
            >
              <a-radio-button :value="0">关闭</a-radio-button>
              <a-radio-button :value="1">开启</a-radio-button>
            </a-radio-group>
          </a-form-item>
          <template v-if="open">
            <a-form-item
              label="陪逛入口页"
              :required="true"
              extra="首页为微盟装修页，需要在微盟后台页面添加搭配师陪逛组件后，且后台设置了首页入口开启才生效"
            >
              <a-checkbox-group
                v-decorator="[
                  'entrancePage',
                  {
                    initialValue: ['home', 'list', 'result', 'detail'],
                    rules: [{ required: true, message: '请选择陪逛入口页' }],
                  },
                ]"
                :options="pages"
              />
            </a-form-item>
            <a-form-item
              label="陪逛入口图"
              :required="true"
              extra="注：000x000px，支持jpg/png/gif格式，文件大小300k内"
            >
              <AliossImageUpload
                :isMultiple="false"
                v-decorator="[
                  'entranceImage',
                  {
                    initialValue: undefined,
                    rules: [{ required: true, message: '请上传陪逛入口图' }],
                  },
                ]"
              >
              </AliossImageUpload>
            </a-form-item>
            <a-form-item label="陪逛服务时间" :required="true">
              <a-checkbox-group v-decorator="['weekdaybox', { initialValue: [0] }]">
                <a-checkbox @change="checkboxChange" :value="0">工作日</a-checkbox>
              </a-checkbox-group>
            </a-form-item>
            <a-form-item :wrapper-col="{ span: 12, offset: 3 }" v-if="showWeekday">
              <time-range
                valueFormat="HH:mm"
                format="HH:mm"
                v-decorator="[
                  'weekday',
                  {
                    initialValue: { start: '09:00', end: '18:00' },
                    rules: [{ required: showWeekday, validator: validatorTime }],
                  },
                ]"
              >
              </time-range>
            </a-form-item>
            <a-form-item :wrapper-col="{ span: 12, offset: 3 }">
              <a-checkbox-group v-decorator="['weekendbox']">
                <a-checkbox data-key="weekend" :value="0" @change="checkboxChange1"
                  >周 末</a-checkbox
                >
              </a-checkbox-group>
            </a-form-item>
            <a-form-item :wrapper-col="{ span: 12, offset: 3 }" v-if="showWeekend">
              <time-range
                valueFormat="HH:mm"
                format="HH:mm"
                v-decorator="[
                  'weekend',
                  {
                    initialValue: { start: '09:00', end: '18:00' },
                    rules: [{ required: showWeekend, validator: validatorTime }],
                  },
                ]"
              >
              </time-range>
            </a-form-item>
            <a-form-item label="陪逛服组ID" :required="true">
              <a-input
                class="group"
                
                :parser="(value) => parseInt(value)"
                v-decorator="[
                  'groupId',
                  { rules: [{ required: true, validator: validateGrounp }] },
                ]"
                placeholder="请填写陪逛接待的七鱼客服组ID"
              ></a-input>
            </a-form-item>
            <a-form-item label="陪逛入口出现时间" :required="true">
              <div class="service-time">
                用户进入小程序后<a-input-number
                  :min="0"
                  step="1"
                  :max="1800"
                  :parser="(value) => parseInt(value)"
                  v-decorator="[
                    'homeIntervalTime',
                    {
                      initialValue: 180,
                      rules: [{ required: true, message: '请输入陪逛入口出现时间' }],
                    },
                  ]"
                  type="number"
                  class="time"
                  placeholder="请填写陪逛接待的七鱼客服组ID"
                ></a-input-number
                >S，出现陪逛入口
              </div>
            </a-form-item>
          </template>
          <a-form-item :wrapper-col="{ span: 12, offset: 3 }">
            <a-button type="primary" html-type="submit"> 保存 </a-button>
          </a-form-item>
        </a-form>
      </a-card>
    </a-spin>
  </div>
</template>

<script>
import moment from "moment";
import { brands } from "../util/brand";
import AliossImageUpload from "../../../components/aliossImageUpload.vue";
import { saveSetting, queryDetail } from "../../../api/micromall/index";
import timeRange from "../components/time";
import { values } from "lodash";
console.log(AliossImageUpload);
export default {
  name: "",
  components: {
    AliossImageUpload,
    timeRange,
  },
  data() {
    return {
      brands,
      open: false,
      pages: [
        { label: "首页", value: "home" },
        { label: "商品列表页", value: "list" },
        { label: "搜索结果页", value: "result" },
        { label: "商详页", value: "detail" },
      ],
      brandId: 2738574294,
      details: null,
      form: this.$form.createForm(this, { name: "coordinated" }),
      showWeekend: false,
      showWeekday: true,
      loading:false
    };
  },
  created() {
    this.querySet();
  },
  methods: {
    moment,
    radioChange(e) {
      let { value } = e.target;
      let { details } = this;
      this.open = value == 1;

      if (values == 1 && details) {
        details.status = value;
        this.updateForm(details);
      }
    },
    tabChange(e) {
      console.log(e);
      (this.showWeekend = false), (this.showWeekday = true);
      this.open = false;
      this.brandId = e;
      this.querySet();
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields(async (err, values) => {
        if (!err) {
          console.log(values);
          const { brandId } = this;
          let params = { brandId };
          const {
            weekend,
            weekday,
            weekendbox,
            weekdaybox,
            groupId,
            entranceImage,
            homeIntervalTime,
            status,
            entrancePage,
          } = values;
          if (status == 1) {
            if (!weekday && !weekend) {
              return this.$message.error("请选择陪逛服务时间");
            }
            params = Object.assign(params, {
              groupId,
              entranceImage,
              homeIntervalTime,
              status,
            });
            params.entrancePage = entrancePage.length > 0 ? entrancePage.join(",") : "";
            let serviceTime = {};
            if (weekdaybox && weekdaybox.length > 0) {
              serviceTime.weekday = weekday;
            }
            if (weekendbox && weekendbox.length > 0) {
              serviceTime.weekend = weekend;
            }
            params.serviceTime = JSON.stringify(serviceTime);
          } else {
            params.status = status;
          }
          this.loading = true
          const res = await saveSetting(params);
          this.loading = false
          if (res.code == 200) {
            this.$message.success("保存成功");
          }
        }
      });
    },
    async querySet() {
      const { brandId } = this;
      this.loading = true
      const res = await queryDetail(brandId);
      this.loading = false
      if (res.code == 200) {
        if (JSON.stringify(res.data) != "{}") {
          this.updateForm(res.data);
        } else {
          console.log("resetFields");

          this.form.resetFields();
        }
      }
      console.log(res);
    },
    checkboxChange(e) {
      console.log(e);
      this.showWeekday = e.target.checked;
    },
    checkboxChange1(e) {
      console.log(e);
      this.showWeekend = e.target.checked;
    },
    updateForm(data) {
      console.log(data);
      let {
        entranceImage,
        entrancePage,
        groupId,
        homeIntervalTime,
        status,
        serviceTime,
      } = data;
      let values = { status };

      if (status == 1) {
        if (entrancePage && entrancePage.length > 0) {
          values.entrancePage = entrancePage.split(",");
        }
        values = Object.assign(values, { entranceImage, groupId, homeIntervalTime });
        if (serviceTime) {
          serviceTime = JSON.parse(serviceTime);
          console.log(serviceTime);
          if (serviceTime.weekend) {
            this.showWeekend = true;
            values.weekendbox = [0];
            values.weekend = serviceTime.weekend;
          } else {
            this.showWeekend = false;
            values.weekendbox = [];
          }
          if (serviceTime.weekday) {
            this.showWeekday = true;
            values.weekdaybox = [0];
            values.weekday = serviceTime.weekday;
          } else {
            this.showWeekday = false;
            values.weekdaybox = [];
          }
        }
      }
      this.open = status == 1;

      this.$nextTick(() => {
        console.log(values);
        this.form.setFieldsValue(values);
      });
    },
    validatorTime(rule, value, callback) {
      if (rule.required && value == undefined) {
        callback("请选择时间");
      } else if (!value.start || value.start == "" || value.start == null) {
        callback("请选择开始时间");
      } else if (!value.end || value.end == "" || value.end == null) {
        callback("请选择结束时间");
      }
      callback();
    },
    validateGrounp(rule,value,callback) {
      const reg = /^[0-9]*$/
      if(rule.required && (value == undefined || value == '') ){
        callback('请填写客服组Id')
      }else if(value.length > 10){
        callback('最大长度10')
      }else if(!reg.test(value) || value < 0){
        callback('请输入正整数')
      }
      callback()
    }
  },
};
</script>

<style scoped>
.service-time {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 10px;
  width: 100;
}

.group {
  width: 300px;
}

.time {
  width: 120px;
}
</style>
